<template>
  <view class="quality-wrap">
    <view class="qiun-wrap">
      <header-title></header-title>
      <view class="qiun">
				<view class="charts-wrap">
					<view class="qiun-charts" >
					  <canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
					</view>
				</view>
				<view class="score">
					<view class="level-wrap">
						<view class="level">评级：</view>
						<view class="letter">{{grade}}</view>
					</view>
					<view class="desc">注释：“B”级89~80分</view>
				</view>
      </view>
    </view>
    <view class="line-wrap">
			<header-title :title="lineTitle"></header-title>
			<view class="qiun-charts2" >
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts2" @touchstart="touchLineA"></canvas>
			</view>
		</view>
  </view>
</template>
<script>
import headerTitle from './header.vue'
import uCharts from '../../../components/u-charts/u-charts/u-charts'
import {qualityRequest} from '../../../api/charts'
let _self;
let canvaRadar = null;
let canvaLineA = null
export default {
  name: 'quality',
  data() {
    return {
      cWidth:'',
      cHeight:'',
      pixelRatio:1,
			Radar: {
				categories: ['体','美', '智'],
				series: [{
					name: '素质',
					data: []
				}]
			},
			lineTitle: '单项素质分析',
			lWidth: '',
			lHeight: '',
			lineData: {
				categories: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
				series: [
					// {
					// 	name: '德',
					// 	data: [65, 60, 75, 80, 90, 90, 65, 60, 75, 80, 100, 100],
					// 	color: '#FB6E6E'
					// },
					{
						name: '体',
						data: [],
						color: '#FFB137'
					},
				{
					name: '美',
					data: [],
					color: '#0BBD41'
				},
				{
					name: '智',
					data: [],
					color: '#FB772D'
				},
				// {
				// 	name: '劳',
				// 	data: [65, 60, 75, 80, 60, 90, 65, 60, 75, 80, 100, 100],
				// 	color: '#2CA9FF'
				// }
				]
			},
			grade: 'B'
    }
  },
	components:{
		headerTitle
  },
  created() {
    _self = this;
    this.cWidth=uni.upx2px(453);
    this.cHeight=uni.upx2px(350);
		this.lWidth=uni.upx2px(710);
		this.lHeight = uni.upx2px(450)
		// this.getServerData()
		this.getLineData()
  },
  methods: {
		async getLineData() {
			const result = []
			uni.showLoading({
				title: '正在加载'
			})
			const res = await qualityRequest()
			console.log(res)
			uni.hideLoading()
			const {sports, art, wisdom}  = res.individual
			this.lineData.series[0].data = sports
			this.lineData.series[1].data = art
			this.lineData.series[2].data = wisdom
			res.list.map((item, index) => {
				result.push(`${this.Radar.categories[index]}${item}`)
			})
			this.Radar.categories = result
			this.Radar.series[0].data = res.list
			this.grade = res.grade
			await _self.showRadar("canvasRadar",this.Radar);
			await _self.showLineA('canvasLineA', this.lineData)
		},
    async showRadar(canvasId,chartData){
      canvaRadar=new uCharts({
        $this:_self,
        canvasId: canvasId,
        type: 'radar',
        fontSize:11,
        legend:true,
        background:'#FFFFFF',
        pixelRatio:_self.pixelRatio,
        animation: true,
        dataLabel: true,
        categories: chartData.categories,
        series: chartData.series,
        width: _self.cWidth*_self.pixelRatio,
        height: _self.cHeight*_self.pixelRatio,
        extra: {
          radar: {
            max: 200//雷达数值的最大值
          }
        }
      });
    },
		async showLineA(canvasId,chartData){
			canvaLineA=new uCharts({
				$this:_self,
				canvasId: canvasId,
				type: 'line',
				fontSize:11,
				legend:true,
				dataLabel:false,
				dataPointShape:true,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type:'grid',
					gridColor:'#0D84D5',
					gridType:'dash',
					fontColor: '#0D84D5',
					// dashLength:8
				},
				yAxis: {
					gridType:'dash',
					title: '截至2018年9月',
					gridColor:'#0D84D5',
					fontColor: '#0D84D5',
					titleFontColor: '#0D84D5',
					splitNumber: 5,
					min:60,
					max:100,
					format:(val)=>{return `${Number(val)}分`}
				},
				width: _self.lWidth*_self.pixelRatio,
				height: _self.lHeight*_self.pixelRatio,
				extra: {
					line:{
						type: 'straight'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function (item, category) {
					return category + ' ' + item.name + ':' + item.data 
				}
			});
		}
  }
}
</script>
<style lang="scss" scoped>
.quality-wrap{
  width: 100%;
  padding: 20upx;
  box-sizing: border-box;
	background-color: #f0f0f0;
  .qiun-wrap,.line-wrap{
    width: 100%;
    height:480upx;
    background:rgba(255,255,255,1);
    border-radius:10upx;
    margin-bottom: 22upx;
    .qiun{
      width: 100%;
      justify-content: space-between;
      padding: 42upx 20upx;
      box-sizing: border-box;
			position: relative;
			.charts-wrap{
				width: 453upx;
				position: absolute;
				left: 0upx;
				top: 20upx;
			}
			.score{
				position: absolute;
				right: 20upx;
				top: 42upx;
				width: 250upx;
				.level-wrap{
					display: flex;
					height: 94upx;
					.level{
						font-size: 25upx;
						color: #333;
						align-self: flex-end;
					}
					.letter{
						color:#FF5353;
						font-size: 94upx;
						line-height: 94upx;
						font-style: italic;
					}
				}
				.desc{
					font-size: 20upx;
					color: #999;
					line-height: 60upx;
				}
			}
    }
  }
  .line-wrap{
    height: 568upx;
    margin-bottom: 0;
		padding: 0;
  }
}
.qiun-charts {
	width: 453upx;
  height: 300upx;
  background-color: #fff;
}

.charts {
  width: 453upx;
  height: 350upx;
  background-color: #fff;
}
.qiun-charts2{
	width: 100%;
	height: 450upx;
	background: #fff;
}
.charts2{
	width: 710upx;
	height: 450upx;
	background-color: #fff;
}
</style>

